<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true">
			<block slot="content">详情</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view v-if="!isNull">
				<view class="increment_info_a">
					<product-swiper :imgUrls="swiperList" :image="goodsDetail.uri"></product-swiper>
				</view>
				<view class="increment_info_b">
					<view class="increment_info_b_b">
						<view class="index_b_d_b_a_b_b_a">
							<view class="index_b_d_b_a_b_b_a_a"><span>积分</span>{{ goodsDetail.integral }}</view>
						</view>
						<view class="increment_info_b_b_a">已兑换{{ goodsDetail.sales_sum }}</view>
					</view>
				</view>
				<view class="increment_info_c">
					<view class="increment_info_c_a" style="margin-top: 0;" @tap="showSpecFun(1)"
						:style="'background-image:url(' + goods_gengduo + ');'">
						<view class="increment_info_c_a_a">选择</view>
						<view class="increment_info_c_a_b">
							<view class="increment_info_c_a_b_a" v-for="(item, index) in goodsDetail.goods_item"
								key="index">
								<view class="increment_info_c_a_b_a_a" v-if="item.image">
									<image :src="item.image"></image>
								</view>
								<view class="increment_info_c_a_b_a_b" v-else>{{ item.spec_value_str }}</view>
							</view>
						</view>
						<view class="increment_info_c_a_d" v-if="goodsDetail.goods_item">
							共{{ goodsDetail.goods_item.length }}款
						</view>
						<!-- <image src="../../static/123.svg" mode="" style="width: 20rpx; height: 80rpx;"></image> -->
					</view>
					<view class="increment_info_c_a" @tap="showSpecFun(0)">
						<view class="increment_info_c_a_a">数量</view>
						<view class="increment_info_c_a_b">
							<view class="increment_info_c_a_b_a">
								<view class="increment_info_c_a_b_a_a" @tap="changeChooseGoodsNum(-1)">-</view>
								<view class="increment_info_c_a_b_a_b">{{ chooseGoodsNum }}</view>
								<view class="increment_info_c_a_b_a_a" @tap="changeChooseGoodsNum(1)">+</view>
							</view>
						</view>
					</view>
					<!-- 配送方式选择 -->
					<u-popup :round="10" :show="show" @close="close" @open="open">
						<view class="pop-box">
							<h2 style="margin: 53rpx 306rpx 0 316rpx; font-size: 30rpx; font-weight: 800;">提货方式</h2>
						</view>
						<!-- 选择方式 -->
						<view class="pop-body"
							style="width: 639rpx; height: 100rpx; margin: 66rpx 56rpx 0 55rpx; display: flex;">
							<!-- 左边 -->
							<view class="pop-self" :style="{ borderColor: expressType === 2 ? '#14288C' : '#E5E5E5' }"
								@tap="changeExpressType(2)">
								<view class="pop-self-icon">
									<image src="../../static/shops.png" mode=""></image>
								</view>

								<view class="pop-self-zi">
									自提
								</view>
							</view>

							<!-- 右边邮递 -->
							<view class="pop-trade" :style="{ borderColor: expressType === 1 ? '#14288C' : '#E5E5E5' }"
								@tap="changeExpressType(1)">
								<view class="pop-trade-icon">
									<image src="../../static/cars.png" mode=""></image>
								</view>

								<view class="pop-trade-zi">
									物流
								</view>

							</view>
						</view>

						<!-- 按钮 -->
						<view class="bt-select-fn" style="width: 587rpx; height: 80rpx;
					 margin: 96rpx 97rpx 60rpx 82rpx; display: flex;">
							<view @click="close()" class="bit-select-cancel"
								style="width: 280rpx; height: 80rpx; 
						color: #262626; border-radius: 30rpx; background: #E8E8E8; padding: 25rpx 100rpx 0 115rpx; box-sizing: border-box; font-size: 26rpx;">取消</view>

							<view @click="onConfirm()" class="bit-select-confirm" style="width: 280rpx; height: 80rpx; 
						color: #ffffff; border-radius: 30rpx; margin: 0 0 0 27rpx;
						 background: #14288c; padding: 25rpx 100rpx 0 115rpx; box-sizing: border-box; font-size: 26rpx;">确定</view>
						</view>


					</u-popup>
				</view>
				<view class="increment_info_d">
					<view class="increment_info_d_a">商品详情</view>
					<view class="increment_info_d_b">
						<!-- <u-image width="690rpx" height="690rpx" :src="goodsDetail.image"></u-image> -->
						<u-parse :content="goodsDetail.content"></u-parse>
					</view>

				</view>
				<view style="width: 750rpx;height: 160rpx;"></view>
				<view class="service_info">
					<button open-type="share" class="service_info_a">
						<view class="service_info_a_aa">
							<u-icon name="share" color="#666666" size="20"></u-icon>
						</view>
						<view class="service_info_a_b">分享</view>
					</button>
					<view class="service_info_b">
						<view class="service_info_b_b" @tap="showPop()">立即兑换</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="details-null column-center">
					<image class="img-null" src="/static/goods_null.png"></image>
					<view class="xs muted">该商品已下架或不存在，去逛逛别的吧~</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import request from '@/common/request.js';
	import cnMoney from '@/components/cn-money/cn-money.vue';
	import storage from '@/common/storage.js';
	import {
		loadingType,
	} from '@/utils/type';
	import UButton from '../../uview-ui/components/u-button/u-button.vue';
	export default {
		components: {
			cnMoney
		},
		data() {
			return {
				showLoading: true,
				isNull: false,
				goods_gengduo: request.baseUrl_img + '/img/goods_gengduo.png',
				cart_num: 0,
				min_price: 0,
				swiperList: [],
				goodsDetail: [],
				commentList: [],
				commentList_count: 0,
				showSpec: false,
				checkedGoods: [],
				address_info: '',
				isGroup: 0,
				id: 0,
				uid: '',
				distribution_code: '',
				baseUrl_H5: request.baseUrl_H5,
				chooseGoodsNum: 1,
				//物流方式：1快递 2自提
				expressType: 2,
				isChooseExpress: false,
				show: false,

			}
		},
		onLoad: function(options) {
			if (!options.id) {
				this.isNull = true;
				return;
			} else {
				this.id = options.id;
				if (options.distribution_code) {
					uni.setStorageSync("tj_code", options.distribution_code);
				}
			}
		},
		onShow() {
			this.uid = uni.getStorageSync('uid');
			this.distribution_code = storage.currentUser.distribution_code;
			this.getGoodsDetailFun();
			// if(this.uid){
			// 	this.getCartNumFun();
			// }
			this.home_config_post();
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: this.goodsDetail.name,
				path: '/pages/goods/info?id=' + this.goodsDetail.id + '&distribution_code=' + this.distribution_code,
				imageUrl: this.goodsDetail.image,
				desc: this.goodsDetail.remark,
				content: this.goodsDetail.remark
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: this.goodsDetail.name,
				path: '/pages/goods/info?id=' + this.goodsDetail.id + '&distribution_code=' + this.distribution_code,
				imageUrl: this.goodsDetail.image,
				desc: this.goodsDetail.remark,
				content: this.goodsDetail.remark
			}
		},
		mounted() {

		},
		methods: {
			user_share_post() {
				let paramsList = {
					unionid: this.id,
					uid: this.uid,
					type: 1
				}
				let optsList = {
					url: 'u-user_share',
					method: 'post'
				};
				let _this = this;
				let topicinfo = this.topicinfo;
				request.httpRequest(optsList, paramsList).then(res => {
					if (res.data.code == 200) {
						_this.getGoodsDetailFun();
					}
				});
			},
			// 点击选择收货地址
			onAddressExpress() {
				uni.navigateTo({
					url: `/chat/pages/user/user_address/user_address?type=${1}`
				})
			},
			home_config_post() {
				let paramsList = {
					uid: this.uid
				}
				let optsList = {
					url: 'p-public_config',
					method: 'post'
				};
				let _this = this;
				request.httpRequest(optsList, paramsList).then(res => {
					if (res.data.code == 200) {
						_this.address_info = res.data.data.address_info;
					}
				});
			},
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
			getCartNumFun() {
				let paramsList = {
					'uid': this.uid
				}
				let optsList = {
					url: 'c-cart_num',
					method: 'post'
				};
				let _this = this;
				request.httpRequest(optsList, paramsList).then(res => {
					if (res.data.code == 200) {
						_this.cart_num = res.data.data.num;
					}
				});
			},
			onChangeGoods(e) {
				this.checkedGoods = e.detail;
			},
			showSpecFun(type, id) {
				if (!this.$util.isLogin()) {
					return;
				}
				this.isGroup = type;
				this.showSpec = true;
			},
			changeChooseGoodsNum(type) {
				switch (type) {
					case -1:
						if (this.chooseGoodsNum > 1) {
							this.chooseGoodsNum--;
						}
						break;
					case 1:
						this.chooseGoodsNum++;
						break;
				}
			},
			changeExpressType(type) {

				this.expressType = type;

			},
			async onAddCart(e) {
				let {
					id,
					goodsNum
				} = e.detail;
				const paramsList = {
					goods_num: goodsNum,
					item_id: id,
					uid: this.uid
				}
				let optsList = {
					url: 'c-add',
					method: 'post'
				};
				uni.showLoading({
					title: '加入中...',
					mask: true
				})
				let _this = this;
				request.httpRequest(optsList, paramsList).then(res => {
					uni.hideLoading();
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
					if (res.data.code == 200) {
						_this.showSpec = false;
						_this.getCartNumFun();
					}
				});
			},
			showPop() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			async onConfirm() {

				let goods = [{
					item_id: this.id,
					num: this.chooseGoodsNum,
				}];
				const params = {
					goods,
					express_type: this.expressType
				};
				this.showSpec = false;
				this.show = false;
				uni.navigateTo({
					url: '/pages/confirm_order/confirm_order?data=' + encodeURIComponent((JSON.stringify(
						params)))
				})
			},
			user_collect_post() {
				let paramsList = {
					unionid: this.id,
					uid: this.uid,
					type: 1
				}
				let optsList = {
					url: 'u-user_collect',
					method: 'post'
				};
				let _this = this;
				request.httpRequest(optsList, paramsList).then(res => {
					if (res.data.code == 200) {
						_this.getGoodsDetailFun();
					}
				});
			},
			async getGoodsDetailFun() {
				let paramsList = {
					id: this.id,
					uid: this.uid
				}
				let optsList = {
					url: 'g-getGoodsDetail',
					method: 'get'
				};
				let _this = this;
				request.httpRequest(optsList, paramsList).then(res => {
					if (res.data.code == 200) {
						let {
							goods_image,
							content
						} = res.data.data;
						console.log("商品详细", res.data.data)
						_this.swiperList = goods_image.map(item => {
							return {
								...item,
								url: item.uri
							}
						});
						console.log("swiperlist返回", _this.swiperList)
						// let data_list=JSON.parse(JSON.stringify(res.data.data));
						// _this.min_price=Number(_this.goodsDetail.min_price);
						_this.goodsDetail = res.data.data
						console.log("商品信息", _this.goodsDetail)
					} else {
						this.isNull = true
					}
					this.showLoading = false;
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.service_info_a_aa {
		width: 20px;
		height: 20px;
		margin: auto;
	}

	.service_info_a_b {
		text-align: center;
		font-family: 思源黑体;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.goods_aa {
		width: 749rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 0 25rpx;
	}

	.goods_aa_a {
		padding: 50rpx 0 30rpx 0;
		overflow: hidden;
	}

	.goods_aa_a_a {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		float: left;
	}

	.goods_aa_a_a span {
		color: #666666;
	}

	.goods_aa_a_b {
		float: right;
		overflow: hidden;
	}

	.goods_aa_a_b_a {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #444444;
		float: left;
	}

	.goods_aa_a_b_b {
		float: left;
		margin-top: 8rpx;
		margin-left: 10rpx;
	}

	.goods_aa_b {
		overflow: hidden;
	}

	button::after {
		border: 0;
	}

	button {
		background-color: #FFFFFF;
		padding-left: 0;
		padding-right: 0;
	}

	.cart_num_a {
		width: 100rpx;
		height: 100rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		box-shadow: 0rpx 5rpx 27rpx 0rpx rgba(86, 124, 46, 0.1);
		border-radius: 50%;
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 40rpx;
	}

	.cart_num_a_a {
		width: 54rpx;
		height: 40rpx;
		background: #0055ff;
		border-radius: 20rpx;
		position: absolute;
		top: -20rpx;
		right: -20rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #ffffff;
	}

	.increment_info_a {
		width: 750rpx;
		height: 750rpx;
	}

	.increment_info_b {
		width: 720rpx;
		background: #FFFFFF;
		border-radius: 34rpx 34rpx 20rpx 20rpx;
		margin: auto;
		margin-top: 25rpx;
	}

	.increment_info_b_b {
		width: 720rpx;
		height: 98rpx;
		border-radius: 34rpx 34rpx 0rpx 0rpx;
		font-size: 47rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		background: linear-gradient(90deg, #0003e7 0%, #00aaff 100%);
		line-height: 98rpx;
		padding: 0 50rpx;
		overflow: hidden;
	}

	.index_b_d_b_a_b_b_a {
		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		float: left;
	}

	.index_b_d_b_a_b_b_a_a {
		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		float: left;
	}

	.index_b_d_b_a_b_b_a_a span {
		font-size: 32rpx;
	}

	.increment_info_b_b_a {
		float: right;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
	}

	.increment_info_b_aa {
		padding: 25rpx;
		overflow: hidden;
	}

	.increment_info_b_a {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.increment_info_b_d {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-top: 20rpx;
	}

	.increment_info_b_c {
		margin-top: 20rpx;
		overflow: hidden;
	}

	.increment_info_b_c_a {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		float: left;
		margin-right: 24rpx;
	}

	.increment_info_b_c_a span {
		color: #0055ff;
		padding: 0 15rpx;
	}

	.increment_info_b_c_b {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111526;
		float: right;
		background-position: left;
		background-repeat: no-repeat;
		background-size: 30rpx 23rpx;
		padding-left: 40rpx;
	}

	.increment_info_c {
		width: 720rpx;
		height: auto;
		margin: auto;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 50rpx 25rpx;
	}

	// pop弹窗
	.pop-box {
		width: 750rpx;
	}

	.pop-self {
		width: 310rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 10rpx;
		border: #14288c solid 1px;
		display: flex;

		.pop-self-icon {
			width: 38rpx;
			height: 38rpx;
			line-height: 38rpx;
			margin: 30rpx 0 0 100rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.pop-self-zi {
			width: 70rpx;
			height: 28rpx;
			line-height: 28rpx;
			font-size: 30rpx;
			// border: 1px solid red;
			margin: 36rpx 0 0 10rpx;
		}
	}


	// 右边
	.pop-trade {
		width: 310rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 10rpx;
		border: #14288c solid 1px;
		margin: 0 0 0 19rpx;
		display: flex;

		.pop-trade-icon {
			width: 42rpx;
			height: 38rpx;
			line-height: 38rpx;
			margin: 30rpx 0 0 100rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		// 物流字
		.pop-trade-zi {
			width: 70rpx;
			height: 28rpx;
			line-height: 28rpx;
			font-size: 30rpx;
			// border: 1px solid red;
			margin: 36rpx 0 0 10rpx;
		}
	}

	.increment_info_c_a {
		height: 80rpx;
		line-height: 80rpx;
		background-repeat: no-repeat;
		background-size: 50rpx;
		background-position: right;
		padding-right: 50rpx;
		margin-top: 50rpx;
	}

	.increment_info_c_a_a {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		float: left;
	}

	.increment_info_c_a_b {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		float: left;
		margin-left: 25rpx;
		width: 400rpx;
		height: 80rpx;
		overflow: hidden;
	}

	.increment_info_c_a_b_a_a {
		width: 80rpx;
		height: 80rpx;
		// border: 1px solid red;
		border-radius: 10rpx;
		box-sizing: border-box;
		// padding: ;
		padding: 0 0 0 30rpx;
		background: #efefef;
		float: left;
		margin-right: 20rpx;
		overflow: hidden;
	}

	.increment_info_c_a_b_a_a image {
		width: 80rpx;
		height: 80rpx;
	}

	.increment_info_c_a_b_a_b {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		float: left;
		margin-right: 20rpx;
		line-height: 80rpx;
	}

	.express_active {
		background: #E71102;
		color: #fff;
	}

	.increment_info_c_a_c {
		width: 520rpx;
		height: 80rpx;
		float: left;
		margin-left: 25rpx;
		overflow: hidden;
	}

	.increment_info_c_a_c_a {
		width: 28%;
		float: left;
		margin-right: 20rpx;
	}

	.increment_info_c_a_c_a_a {
		width: 100%;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 45rpx;
	}

	.increment_info_c_a_c_a_b {
		width: 100%;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 45rpx;
	}

	.increment_info_c_a_d {
		width: 120rpx;
		height: 80rpx;
		background: #EEEEEE;
		border-radius: 10rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		float: left;
	}


	.increment_info_d {
		background: #FFFFFF;
		width: 750rpx;
		height: auto;
		overflow: hidden;
		margin-top: 20rpx;
		padding-bottom: 40rpx;
	}

	.increment_info_d_a {
		// border: 1px solid red;
		// box-sizing: border-box;
		// padding: 0 0 0 -220rpx;

		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		height: 140rpx;
		line-height: 140rpx;
		text-align: center;
	}

	.increment_info_d_b {
		padding: 30rpx;
		overflow: hidden;
	}

	.service_info {
		width: 750rpx;
		height: 128rpx;
		background: #FFFFFF;
		border: 1px solid #F2F2F2;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		padding: 16rpx 28rpx;
		position: fixed;
		bottom: 0;
	}

	.service_info_a {
		height: 80rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		background-position: center 0rpx;
		background-repeat: no-repeat;
		background-size: 50rpx;
		line-height: 130rpx;
		float: left;
		width: 80rpx;
		text-align: center;
		position: relative;
	}

	.service_info_a_a {
		width: 34rpx;
		height: 34rpx;
		background: linear-gradient(0deg, #E71102, #E71102);
		border-radius: 17rpx;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 34rpx;
	}

	.service_info_aa {
		color: #E71102;
	}

	.service_info_aaa {
		background-size: 45rpx;
	}

	.service_info_b {
		width: 420rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 44rpx;
		float: right;
		overflow: hidden;
	}

	.service_info_b_a {
		width: 50%;
		height: 88rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #E71102;
		text-align: center;
		line-height: 78rpx;
		float: left;
	}

	.service_info_b_b {
		width: 100%;
		height: 88rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		text-align: center;
		line-height: 78rpx;
		float: left;
		background-color: rgb(20, 40, 140);
	}

	.details-null {
		padding-top: 140rpx;
		margin-bottom: 100rpx;
	}

	.column-center {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.img-null {
		width: 300rpx;
		height: 300rpx;
	}
</style>